<mat-sidenav-container [hasBackdrop]="false"
                       class="w-100 h-100"
                       *ngIf="menu$ | async as menu">
  <mat-sidenav [mode]="menu.isMobile ? 'over' : 'side'"
               [class.opened]="menu.open"
               [class.collapsed]="menu.collapsed"
               [class.mobile]="menu.isMobile">
    <mina-menu></mina-menu>
    <div class="backdrop" (click)="toggleMenu()"></div>
  </mat-sidenav>
  <mat-sidenav-content class="flex-column"
                       [style.margin-left.px]="menu.isMobile ? 0 : (menu.collapsed ? 44 : 160)">
    <mina-toolbar></mina-toolbar>
    <div class="mina-content"
         [class.no-submenus]="subMenusLength < 2"
         [class.mobile]="menu.isMobile">
      <router-outlet></router-outlet>
    </div>
    <mina-submenu-tabs *ngIf="menu.isMobile"
                       [class.d-none]="subMenusLength < 2"
                       class="mobile-menu border-top"
                       (subMenusLength)="onSubmenusLengthChange($event)"></mina-submenu-tabs>
  </mat-sidenav-content>
</mat-sidenav-container>
